<template>
  <component
    :is="isDrawer ? Drawer : 'div'"
    v-model:visible="visible"
    v-bind="drawerOptions"
    class="sl-project-info"
    :class="drawerClass"
    :content-wrapper-style="{ position: 'static', borderRadius: '4px', overflow: 'hidden' }"
    :body-style="{ paddingBottom: 0 }"
  >
    <a-skeleton avatar :paragraph="{ rows: 5 }" :loading="innerLoading">
      <a-descriptions title="基本信息" :column="1" :colon="false">
        <a-descriptions-item label="项目名称"> {{ detail.projectName || "--" }} </a-descriptions-item>
        <a-descriptions-item label="所属客户"> {{ detail.customerName || "--" }} </a-descriptions-item>
        <a-descriptions-item label="所属行业"> {{ detail.industryName || "--" }} </a-descriptions-item>
        <a-descriptions-item label="项目logo">
          <a-image
            :src="detail.projectInfo?.projectLogo"
            :fallback="DEFAULT_IMG_BASE64_STR"
            :width="48"
            :height="48"
          ></a-image>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="联系信息" :column="1" :colon="false">
        <a-descriptions-item label="项目负责人">
          {{ handleValue(detail.projectLeaderUserName, detail.projectLeaderUserPhone) }}
        </a-descriptions-item>
        <a-descriptions-item label="项目经办人">
          {{ handleValue(detail.projectTransactorUserName, detail.projectTransactorUserPhone) }}
        </a-descriptions-item>
        <a-descriptions-item label="现场联系人">
          {{ handleValue(detail.contactPerson, detail.contactPhone) }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="地址信息" :column="1" :colon="false">
        <a-descriptions-item label="国家地区"> {{ detail.regionName || "--" }} </a-descriptions-item>
        <a-descriptions-item label="详细地址"> {{ detail.address || "--" }} </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="项目信息" :column="1" :colon="false">
        <a-descriptions-item label="建筑面积(m²)">
          {{ detail.projectInfo?.buildingArea || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="设计单位名称">
          {{ detail.projectInfo?.designUnitName || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="运营开始日期">
          {{ detail.projectInfo?.operationDate || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="项目简介">
          {{ detail.projectInfo?.introduction || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="项目封面">
          <a-image :src="detail.projectInfo?.coverPhoto" :fallback="DEFAULT_IMG_BASE64_STR" :width="168"></a-image>
        </a-descriptions-item>
        <a-descriptions-item label="项目现场图" class="project-img-list">
          <div
            v-if="detail.projectInfo && detail.projectInfo.livePhotos && detail.projectInfo.livePhotos.length > 0"
            class="flex flex-wrap"
          >
            <center-img
              v-for="src in detail.projectInfo.livePhotos"
              :key="src"
              :width="168"
              :height="168"
              :src="src"
              class="mr-2"
            ></center-img>
          </div>
          <!-- <a-image-preview-group
            v-if="detail.projectInfo && detail.projectInfo.livePhotos && detail.projectInfo.livePhotos.length > 0"
          >
            <a-image
              v-for="src in detail.projectInfo.livePhotos"
              :key="src"
              :src="src"
              :fallback="DEFAULT_IMG_BASE64_STR"
              :width="168"
            ></a-image>
          </a-image-preview-group> -->
          <span v-else>--</span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions v-if="additionalInfo.length > 0" title="自定义属性" :column="1" :colon="false">
        <a-descriptions-item v-for="(item, i) in additionalInfo" :key="i" :label="item.customLabel">
          {{ item.customValue }}
        </a-descriptions-item>
      </a-descriptions>
    </a-skeleton>
  </component>
</template>
<script setup lang="ts">
import { Drawer, DrawerProps } from "ant-design-vue";
import { computed, ref, watch } from "vue";
import { getProjectDetail } from "/@/api/aiot/projectManage";
import { CustomAttributesItem, ReqProjectInfo } from "/@/api/aiot/projectManage/models";
import { handleValue } from "/@/utils/common";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";

const props = defineProps<{
  isDrawer: boolean;
  showMember: boolean;
  options?: { projectId: string } | null;
  loading?: boolean;
  data?: ReqProjectInfo;
}>();
const emits = defineEmits(["update:loading"]);

let drawerOptions: DrawerProps = {};
if (props.isDrawer) {
  drawerOptions = {
    title: "项目详情",
    footer: null,
    mask: false,
  };
}

const drawerClass = computed(() => {
  if (!props.isDrawer) return "";
  return ["sl-dialog sl-drawer sl-inside-drawer", visible.value ? "w-auto md:!w-168 p-3" : "py-3"].join(" ");
});

const innerLoading = ref(true);
watch(innerLoading, (v) => {
  emits("update:loading", v);
});
const detail = ref<ReqProjectInfo>({});
watch(
  () => props.data,
  (data) => {
    if (data) {
      innerLoading.value = false;
      detail.value = data;
    }
  },
  {
    immediate: true,
  }
);
const visible = ref(false);

async function loadDetail(showLoading: boolean) {
  if (!props.options) return;
  const data = await getProjectDetail(
    {
      projectId: props.options.projectId,
    },
    showLoading
  );
  innerLoading.value = false;
  if (data) {
    detail.value = data;
  }
}
watch(
  () => props.options,
  (options) => {
    if (options) {
      visible.value = true;
      loadDetail(!innerLoading.value);
    }
  }
);

const additionalInfo = computed<CustomAttributesItem[]>(() => {
  const projectInfo = detail.value.projectInfo;
  if (projectInfo) {
    let _additionalInfo = projectInfo.additionalInfo;
    if (_additionalInfo) {
      try {
        _additionalInfo = JSON.parse(_additionalInfo);
        if (Array.isArray(_additionalInfo)) {
          return _additionalInfo;
        }
      } catch (err) {
        console.error("additionalInfo parse error", err);
      }
    }
  }
  return [];
});
</script>

<style lang="less">
.sl-project-info {
  .ant-descriptions-item-label {
    width: 130px;
    color: @color-secondary;
  }
}
.project-img-list {
  .ant-image {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .ant-descriptions-item-content {
    display: inline-block;
  }
}
</style>
